<template>

<div  ref="wrapper" class="wrapper citylistfirst">
  <div class="content">
    <div class="city">当前城市</div>
    <div class="nowcity">
      <span class="zinowcity">北京</span>
    </div>


    <div class="city">热门城市</div>
    <div class="hotcity">
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
      <span class="zihotcity">北京</span>
    </div>


    <div class="city">A</div>
    <ul class="list">
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
      <li class="listson">阿富汗</li>
    </ul>



    </div>

  </div>


</template>

<script>

  import BScroll from 'better-scroll'
    export default {
        name: "Citylist",
        mounted(){

           this.scroll=new BScroll(this.$refs.wrapper)


       }

    }
</script>

<style scoped lang="stylus">

.citylistfirst
  position absolute
  left 0
  top 1.67rem
  bottom 0
  right 0
  overflow hidden
  .city
   width 94%
   background #ccc
   padding 2% 3%
   font-size .32rem
  .nowcity
   width 90%
   .zinowcity
    display inline-block
    border 1px solid black
    font-size .3rem
    padding:.1rem .6rem
    border-radius .06rem
    margin .2rem 0
    margin-left .3rem
  .hotcity
   width 90%
   padding-top .2rem
   .zihotcity
     width 10%
     display inline-block
     border 1px solid black
     font-size .3rem
     padding:.1rem .6rem
     border-radius .06rem
     margin 0rem .1rem
     margin-bottom .2rem
  .list
   .listson
    border-bottom 1px solid #ccc
    padding .2rem 3%
</style>
